function setBandbar(id, band, incolor, bgcolco) {
  (function(obj) {
    obj.win = {
      /**
       * 环形进度条
       * @param el：DOM对象
       * @param val:数值
       * @param bg:背景颜色
       * @param color:环颜色
       * @param textColor：数字颜色
       * @param fontSize：数字字体大小
       * @param size:环宽度
       * @param r:环内半径
       * @param time:动画时间
       * @param easing:动画类型:
       *  'linear'
       *  '<' or 'easeIn' or 'ease-in'
       *  '>' or 'easeOut' or 'ease-out'
       *  '<>' or 'easeInOut' or 'ease-in-out'
       *  'backIn'or 'back-in'
       *  'backOut' or 'back-out'
       *  'elastic'
       *  'bounce'
       */
      loopFun: function(el, val, bg, color, textColor, fontSize, size, r, time, easing) {
        var si = r + size / 2;
        var xy = r + size;
        if (val < 0 || val > 100) {
          return alert('请输入0~100之间的数')
        }
        var paper = Raphael(el, (r + size) * 2, (r + size) * 2);
        paper.circle(xy, xy, r).attr({
          'stroke-width': size,
          stroke: bg
        });
        paper.customAttributes.arc = function(val) {
          var v = 360 * val / 100,
            s = -180,
            e = s + v,
            x = xy,
            y = xy,
            rad = Math.PI / 180,
            x1 = x + r * Math.sin(-s * rad),
            y1 = y + r * Math.cos(-s * rad),
            x2 = x + r * Math.sin(-e * rad),
            y2 = y + r * Math.cos(-e * rad),
            path = [
              ['M', x1, y1],
              ['A', r, r, 0, +(e - s > 180), 1, x2, y2]
            ];
          return {
            path: path
          };
        };
        var an = paper.path().attr({
          'stroke-width': size,
          stroke: color,
          arc: 0.01
        });
        an.animate({
          stroke: color,
          arc: val
        }, time, easing);
        setTimeout(function() {
          if (val == 100) {
            paper.circle(xy, xy, r).attr({
              'stroke-width': size,
              stroke: color
            });
          }
        }, time);
        paper.customAttributes.txt = function(val) {
          return {
            text: Math.floor(val * 100) / 100 + '%'
          }
        };
        var l = paper.text(xy, xy).attr({
          txt: 0,
          'fill': textColor,
          'font-size': fontSize,
          'font-weight': 700
        });
        l.animate({
          txt: val
        }, time);
      },
      /**
       *矩形进度条
       * @param el：DOM对象
       * @param val:数值
       * @param bg：背景颜色
       * @param color：进度条颜色
       * @param textColor：数字颜色
       * @param fontSize：数字字体大小
       * @param lenght：进度条总长度
       * @param size：进度条高度
       * @param time：进度动画时间
       * @param easing:动画类型:
       *  'linear'
       *  '<' or 'easeIn' or 'ease-in'
       *  '>' or 'easeOut' or 'ease-out'
       *  '<>' or 'easeInOut' or 'ease-in-out'
       *  'backOut' or 'back-out'
       *  'bounce'
       */
      stripFun: function(el, val, bg, color, textColor, fontSize, lenght, size, time, easing) {
        var s = size / 2;
        if (val < 0 || val > 100) {
          return alert('请输入0~100之间的数')
        }
        var paper = Raphael(el, lenght, size);
        paper.path('M 0,' + s + ' L' + lenght + ',' + s).attr({
          'stroke-width': size,
          stroke: bg
        });
        var strip = paper.path('M 0,' + s + ' L0,' + s).attr({
          'stroke-width': size,
          stroke: color
        });
        strip.animate({
          path: 'M 0,' + s + ' L' + lenght / 100 * val + ',' + s
        }, time, easing);
        paper.customAttributes.arc = function(val) {
          return {
            text: Math.floor(val * 100) / 100 + '%'
          }
        };
        var l = paper.text(lenght / 2, s).attr({
          arc: 0,
          'fill': textColor,
          'font-size': fontSize
        });
        l.animate({
          arc: val
        }, time);
      }
    };
  })(window);
  //不依赖jquery，第一个参数可以通过js获取DOM对象
  //win.loopFun(document.getElementsByClassName('div1')[0],60,'#ccc','#00A0E9','#00A0E9','20px',20,60,1000,'bounce');
  win.loopFun($('#' + id)[0], band, incolor, bgcolco, '#00A0E9', '20px', 20, 130, 1000, 'bounce');

}
var seriesOptions = [],
  seriesCounter = 0,
  names = ['MSFT', 'AAPL', 'GOOG'];
/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

  Highcharts.stockChart('container', {
    chart: {
      zoomType: null,
      // pinchType: null
    },
    rangeSelector: {
      selected: 4
    },
    yAxis: {
      labels: {
        formatter: function() {
          return (this.value > 0 ? ' + ' : '') + this.value + '%';
        }
      },
      plotLines: [{
        value: 0,
        width: 2,
        color: 'silver'
      }]
    },
    plotOptions: {
      series: {
        compare: 'percent',
        showInNavigator: true
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      valueDecimals: 2,
      followTouchMove: false,
      split: true
    },
    series: seriesOptions
  });
}

function setHightStockMap() {

  $.each(names, function(i, name) {
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/' + name.toLowerCase() + '-c.json&callback=?', function(data) {
      seriesOptions[i] = {
        name: name,
        data: data
      };
      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter += 1;
      if (seriesCounter === names.length) {
        createChart();
      }
    });
  });
}

export const setLishi = function(symbol, box_data) {
  // var orig_url = 'https://data.jianshukeji.com/jsonp?filename=json/aapl-c.json&callback=?';
  var url = '//api.imrating.com/api/historical/';


  $.getJSON(url, {
    symbol: symbol
  }, function(resp) {
		let data = resp.data.trends;
		for (let ky in box_data) {
				Highcharts.stockChart(box_data[ky].document_id, {
					rangeSelector: {
						selected: 0
					},
					credits: {
						enabled: false //不显示LOGO
					},
					series: [
						lishi_series(resp.data.currency.symbol, resp.data.trends[box_data[ky].trends_field]),
						// lishi_series('BTC', resp.data.btc_trends[series_field]),
					]
				});
		}
	});
    
}

function lishi_series(name, data) {
  var series = {
    name: name,
    data: data,
    type: 'spline',
    threshold: null,
    tooltip: {
      valueDecimals: 2
    },
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.getOptions().colors[0]],
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ]
    }
  }
  return series
}
